import QtQuick 2.7
import QtQuick.Controls 1.4
import QtQuick.Controls 2.1
import QtQuick.Controls.Styles 1.4
import QtQuick.Dialogs 1.2
import QtQuick.Layouts 1.1
import QtWebView 1.1
import QtQuick.Window 2.2
import "../widgets" as Widgets

import com.yihu.xchat.model 1.0

import "../../js/view/RootView.js" as Js

ApplicationWindow {
    id: rootView

    title: "医疗云通讯"
    visible: true
    width: Screen.width
    height: Screen.height
    minimumHeight: 600
    minimumWidth: 900
    visibility: Window.Maximized

    // 信号
    signal qsSignIn(string username, string password, int availableStatusType)
    signal qsSignOut()

    // 方法
    readonly property var switchTopLevelView: Js.switchTopLevelView

    // 常量
    readonly property int topCategoryItemWidth: 64
    readonly property int topCategoryItemHeight: 64
    readonly property int categoryMargin: 8

    // 顶级视图名称, 注意必须与几个视图的ID还有模型的viewId保持一致
    readonly property var topLevelViews: QtObject {
        readonly property string sessionsView: "sessionsView"
        readonly property string rosterView: "rosterView"
        readonly property string groupsView: "groupsView"
        readonly property string webBrowserView: "webBrowserView"
    }

    RowLayout{
        anchors.fill: parent

        spacing: 0

        //----------------------------
        // 左侧栏
        //----------------------------
        Rectangle{
            id: leftSideRect
            Layout.fillHeight: true

            width: topCategoryItemWidth + categoryMargin * 2
            color: "gray"

            // 用户头像
            Widgets.RoundImage {
                id: userPhotoRect

                anchors.top: parent.top
                anchors.topMargin: 10
                anchors.horizontalCenter: parent.horizontalCenter

                width: topCategoryItemWidth
                height: topCategoryItemHeight

                source: LocalUserSingleton.thumbnail
            }

            // 顶级视图列表
            Rectangle {
                anchors.top: userPhotoRect.bottom
                anchors.topMargin: 20
                anchors.bottom: settingRect.top

                height: Layout.fillHeight
                color: "transparent"

                ListView {
                    id: topLevelListView

                    anchors.fill: parent
                    anchors.leftMargin: categoryMargin

                    highlight: Rectangle{
                       color: "white"
                       radius: topCategoryItemWidth * 1 / 3
                       focus: true
                    }

                    model: topLevelListModel

                    delegate: Component {
                        Rectangle{
                            width: topCategoryItemWidth
                            height: topCategoryItemWidth
                            color: "transparent"

                            Image {
                                id: category
                                source: icon

                                anchors.verticalCenter: parent.verticalCenter
                                anchors.horizontalCenter: parent.horizontalCenter

                                width: 40
                                height: 40
                            }

                            MouseArea {
                                anchors.fill: parent
                                onClicked: {
                                    // 点击切换视图
                                    Js.switchTopLevelView(model.viewId, index);
                                }
                            }
                        }
                    }
                }

            }

            // 退出
            Rectangle {
                id: signoutRect

                anchors.right: parent.right
                anchors.bottom: settingRect.top
                anchors.left: parent.left

                width: topCategoryItemWidth
                height: topCategoryItemHeight
                color: "transparent"

                Image {
                    anchors.centerIn: parent

                    width: 40
                    height: 40
                    source: "qrc:/images/signout.png"
                }

                MouseArea{
                    anchors.fill: parent

                    onClicked: {
                        Js.confirmSignout();
                    }
                }
            }

            // 设置
            Rectangle {
                id: settingRect

                anchors.horizontalCenter: parent.horizontalCenter
                anchors.bottom: parent.bottom
                anchors.bottomMargin: 10

                width: topCategoryItemWidth
                height: topCategoryItemHeight
                color: "yellow"

                radius: topCategoryItemHeight / 2
                clip: true

                Image {
                    anchors.fill: parent

                    source: "qrc:/images/settings.png"
                }
            }
        }

        //----------------------------
        // 右侧栏。此处根据需要增加顶级视图
        //----------------------------
        Rectangle {
            id: rightRect

            Layout.fillHeight: true
            Layout.fillWidth: true

            color: "lightgray"

            SessionsView {
                id: sessionsView
                anchors.fill: parent
                visible: true
            }

            RosterView {
                id: rosterView
                anchors.fill: parent
                visible: false
            }

            GroupsView {
                id: groupsView
                anchors.fill: parent
                visible: false
            }

            WebBrowserView {
                id: webBrowserView
                anchors.fill: parent
                visible: false
            }
        }
    }

    // 视图模型数据
    // 根据业务扩展需要，以后可以将此部分数据整合到C++模型中，当前先在文件中写死
    ListModel {
        id: topLevelListModel
        ListElement {
            viewId: "sessionsView"                      // 关联视图ID
            icon: "qrc:/images/catetory_recents.png"    // 图标
            tip: "最近联系人"                             // 鼠标提示
        }

        ListElement {
            viewId: "rosterView"
            icon: "qrc:/images/catetory_contacts.png"
            tip: "联系人"
        }

        ListElement {
            viewId: "groupsView"
            icon: "qrc:/images/avatar_default_group.png"
            tip: "Groups"
        }

        ListElement {
            viewId: "webBrowserView"
            icon: "qrc:/images/category_desktop.png"
            tip: "Cloud Desktop"
        }
    }

    MessageDialog {
        id: messageDialog

        property var callback
        onYes: {
            callback();
        }
    }

    // 主窗口加载完成后，先显示登录对话框，在登录成功后才显示自身视图
    property var loginDialog: null
    Component.onCompleted: {
        var component = Qt.createComponent("../dialog/LoginDialog.qml");
        console.debug(component.errorString());

        // 创建并连接信号-槽
        loginDialog = component.createObject(rootView);
        engine.signInSucceed.connect(loginDialog.onSignInSucceed);
        engine.signInFailed.connect(loginDialog.onSignInFailed);

        loginDialog.show();
    }
}
